<template>
    <div class="moreBtn">
        <el-popover
            placement="right"
            width="200"
            trigger="hover">
            <ul class="moreList">
                <li v-for="item in muenList" :key="item.type" @click="onClick(item)"><a><img :src="item.src" alt=""> {{item.text}}</a></li>
            </ul>
            <template #reference>
                <img class="muen" src="/src/assets/cd.png" alt="">
            </template>
        </el-popover>
    </div>
    </template>
    
    <script setup>
    import {ref} from "vue"
    const emit = defineEmits(['change'])
    import op1 from '@/assets/op1.png'
    import op2 from '@/assets/op2.png'
    import op3 from '@/assets/op3.png'
    import op4 from '@/assets/op4.png'

    const props = defineProps({
        muenList:{
            type:Array,
            default:[
                {text:'认领地块',type:1,src:op1},
                {text:'批量编辑地块',type:2,src:op3},
                // {text:'导出地块',type:3,src:'/src/assets/op2.png'},
                {text:'土壤养分',type:4,src:op4}
            ]
        }
    })

    const onClick = (item)=>{
      emit('change',item)
    }

    </script>
  
    <style lang="scss" scoped>
          .moreBtn{
            display: flex;
            align-items: center;
            justify-content: center;
            width: 28px;
            height:32px;
            margin: 0 0 0 10px;
            .muen{
                height:26px;
                width: 26px;
                cursor: pointer;
            }
        }
        .moreList{
            list-style: none;
            padding: 0;
            margin: 0;
            font-family: PingFangSC, PingFang SC;
            font-weight: 500;
            width: 170px;
            li{
                position: relative;
                padding: 0 10px;
                a{
                    display: flex;
                    height: 36px;
                    color: #666666;
                    font-size: 14px;
                    align-items: center;
                    img{
                        height: 22px;
                        flex-shrink:0;
                        margin: 0 5px 0 0;
                    }

                }
                &:hover{
                        height: 36px;
                        background: rgba(0, 173, 110,0.08) ;
                        color: #333333;
                        cursor: pointer;
                        &::after{
                            content: '';
                            height:36px;
                            width:3px;
                            left:0;
                            background-color: #04AE70;
                            z-index: 99;
                            position: absolute;
                            top: 0;
                        }
                    }
            }
    }
    </style>